<template>
  <div class="navbar flex align space-between ft14">
    <div class="navbar-left flex align span-1">
      <div class="navbar-logo" @click="$router.push({ name: 'Home' })">
        <img src="../assets/images/logo.png" alt="logo" />
      </div>
      <a-menu v-model="current" mode="horizontal" @click="menuHandler">
        <a-menu-item v-for="item in navbar" :key="item.key">
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </div>
    <div class="navbar-right flex align ft14">
      <div class="navbar-xyf">
        <!-- {{ $t('Credit') }}：<span>{{ userInfo.xyf }}</span> -->
      </div>
      <a-dropdown>
        <span class="ant-dropdown-link color-white pointer">
          <a-icon type="user" /> {{ userInfo.email }}
        </span>
        <a-menu slot="overlay" @click="setHandler">
          <!-- <a-menu-item>
           <a href="javascript:;">{{ $t("账户设定") }}</a>
         </a-menu-item> -->
          <!-- <a-menu-item>
           <a href="javascript:;">{{ $t("我的资产") }}</a>
         </a-menu-item> -->
          <a-menu-item key="Authentication">
            <a href="javascript:;">{{ $t('身份认证') }}</a>
          </a-menu-item>
          <!-- <a-menu-item>
           <a href="javascript:;">{{ $t("意见反馈") }}</a>
         </a-menu-item> -->
          <a-menu-item key="logout">
            <a href="javascript:;">{{ $t('登出') }}</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
      <a-dropdown>
        <a-menu slot="overlay" @click="handleMenuClick" v-model="language">
          <a-menu-item v-for="item in langArr" :key="item.key">{{ item.value }}</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px" ghost shape="round" size="small">
          <span class="ft13">{{ languageDesc }}</span>
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>
    <template v-if="userInfo.token">
      <customService :token="userInfo.token" :userId="userInfo.id" noBtn ref="customerService" />
    </template>
  </div>
</template>

<script>
import { getVildateReal } from '@/api/sys';
import { mapActions } from 'vuex'
import { ACCESS_TOKEN } from "@/utils/constants";
import customService from '@/components/customer-service/index'
import storage from "store";
export default {
  name: 'NarBar',
  components: { customService },
  data() {
    return {
      current: [],
      navbar: [
        { name: this.$t('Cloud mining'), url: '/C_Saving', key: 'C_Saving' },
        { name: this.$t('Delivery contract'), url: '/DeliveryContract', key: 'DeliveryContract' },
        { name: this.$t('My assets'), key: 'CurrencyAccount', url: '/CurrencyAccount' },
        // {name: this.$t("快速充值"), key: "recharge", url: "/recharge"},
        // { name: this.$t("永续合同"), key: "yxht", url: "/PerpetualContract" },
        { name: this.$t('spot trading'), key: 'CurrencyTransaction', url: '/CurrencyTransaction' },
        {name: this.$t("Online customer service"), key: "zxkf"},
        { name: this.$t('Telegram'), key: 'tg' }
      ],
      userInfo: {
        userName: '',
        xyf: 100
      },
      nickName: '',
      showModal: false,
      language: '',
      langArr: [
        {  key: 'en', value: 'English' },
        {  key: 'ja', value: '日本語' },
        {  key: 'zh', value: '简体中文' },
      ]
    }
  },
  watch: {
    $route: {
      handler(newValue) {
        this.current = [newValue.name]
      },
      immediate: true
    }
  },
  mounted() {
    this.GetUserInfo().then((res) => {
      res.token = storage.get(ACCESS_TOKEN)
      this.nickName = res.nickName
      this.userInfo = res
    })
    this.language = [localStorage.getItem('fx-lang')]
  },
  computed: {
    languageDesc() {
      const index = this.langArr.findIndex(item => item.key === localStorage.getItem('fx-lang'))
      return this.langArr[index==-1?0:index].value
    }
  },
  methods: {
    ...mapActions(['Logout', 'GetUserInfo']),
    handleMenuClick(e) {
      // console.log("click", e);
      window.location.reload()
      this.$i18n.locale = e.key
      localStorage.setItem('fx-lang', e.key)
    },
    menuHandler({ item }) {
      // console.log(item.index, this.navbar[item.index], 'menuHandler');
      if (this.navbar[item.index].url) {
        this.$router.push({ path: this.navbar[item.index].url })
      } else if (this.navbar[item.index].key === 'zxkf') {
        // this.showModal = true
        this.$refs.customerService.handleServiceClick()
      } else if (this.navbar[item.index].key === 'tg') {
        // window.location.href = 'https://t.me/FXGoldOptions'
        window.open('https://t.me/FXGoldOptions', '_blank')
      }
    },
    setHandler({ key }) {
      if (key === 'logout') {
        this.Logout().then(() => {
          this.$router.replace({ path: '/login' })
        })
      } else {
        getVildateReal().then(()=>{
          this.$router.push({ name: key })
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.ft13 {
  font-size: 12px;
}

:deep.ant-btn-round.ant-btn-sm {
  height: 30px;
}

:deep.ant-menu {
  background-color: transparent;
  color: white;
  border-bottom: none;
}

.navbar {
  background-color: rgb(10, 10, 10);
  height: 60px;
  padding: 0 40px;
  color: white;

  .navbar-left {
    .navbar-logo {
      height: 40px;
      cursor: pointer;
      margin-right: 20px;

      img {
        height: 40px;
      }
    }
  }

  .navbar-right {
    .navbar-xyf {
      margin-right: 20px;
    }
  }
}
</style>
